<template>
    <div class="brand">
        <h3 class="title" @click="toBrandList">品牌制造商直供</h3>
        <ul class="list">
            <li class="item" v-for="item in $store.state.home.brandList" :key="item.id" @click="toBrandDetail(item.id)">
                <img :src="item.new_pic_url" alt="">
                <div class="text-holder">
                    <p>{{item.name}}</p>
                    <p>{{item.floor_price}}元起</p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        methods: {
            // 进入品牌制造商详情列表
            toBrandDetail(id){
                this.$router.push({path:'/pages/brand/detail',query:{id}});
            },
            // 进入制造商列表
            toBrandList(){
                this.$router.push('/pages/brand/list');
            }
        },
    }
</script>

<style lang="scss" scoped>
    .brand{
        background-color: #fff;
        margin-top: 8px;
        .title{
            font-size: 12px;
            font-weight: 500;
            padding: 20px 0;
            text-align: center;
        }
        .list{
            display: flex;
            flex-wrap: wrap;
            .item{
                position: relative;
                margin: auto;
                margin-bottom: 4px;
                width: 48%;
                .text-holder{
                    position: absolute;
                    left: 5px;
                    top: 10px;
                    line-height: 30px;
                }
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }

    }
</style>